<template>
  <div class="my">
    <div class="top">
      <div class="title">美团</div>
    <div class="tou">
      <div class="left">
        <div class="img">
          <img src="../assets/头像.png" alt="">
        </div>
        <div class="text">
          <div class="zhang">131345</div>
          <div class="phone">432e</div>
        </div>
      </div>
      <div class="shezhi">账户设置</div>
    </div>
    <div class="ka">
      <div class="k1">
        <span>收藏</span> <span>关注公众号</span> <span>客服</span> <span>红包卡券</span>
      </div>
    
    </div>
    </div>
     
    <div class="redbao">
      <div class="red">
        <div class="r1">红包</div>
        <div class="r2">我的订单</div>
      </div>
      <div class="red">
        <div class="r1">17.3万</div>
        <div class="r2">借钱</div>
        <div class="r3">大约可借</div>
      </div>
      <div class="red">
        <div class="r1">红包</div>
        <div class="r2">待使用</div>
      </div>
            <div class="red">
        <div class="r1">余额</div>
        <div class="r2">待评价</div>
      </div>
      <div class="red">
        <div class="r1">余额</div>
        <div class="r2">退款/售后</div>
      </div>
    </div>
    <div class="gongju">
      <div>我的钱包</div>
      <div class="redbao">
      <div class="red">
        <div class="r1">17.3万</div>
        <div class="r2">借钱</div>
        <div class="r3">大约可借</div>
      </div>
      <div class="red">
        <div class="r1">1月</div>
        <div class="r2">消费账单</div>
        <div class="r3">待订阅</div>
      </div>
      <div class="red">
        <div class="r1">1个</div>
        <div class="r2">空气炸锅</div>
        <div class="r3">近期申卡奖励</div>
      </div>
            <div class="red">
              <div class="r1">142元</div>
        <div class="r2">我的账单</div>
        <div class="r3">最近支付</div>
      </div>

    </div>
    </div>

    <div class="new">
      <div class="zuo">
        <h3>邀好友赚现金</h3>
        <div class="t1">最高得15元</div>
          <div class="ing">
          <img src="../assets/服务.png" alt="">
        </div>
        <div class="div">

          <span>去邀请</span><span>查佣金</span>
        </div>
      </div>
      <div class="zuo">
            <h3>美团服务号</h3>
        <div class="t1">关注后及时接受系统信息</div>
        <div class="ing">
          <img src="../assets/mtfu.png" alt="">
        </div>
        <div class="div">

          <span>立即关注</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.my{
  background: #eee;
  font-size: 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.top{
  width: 100%;
  background:#ffd000;
}
.title{
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  margin-left: 10px;
}
.tou{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-top: 10px;

}
.img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
  background: lightblue;
}
img{
  width: 100%;
  border-radius: 50%;
}
.zhang{
  font-size: 14px;
  font-weight: 700;
}
.shezhi{
  background-color:#d4b115a1;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-right: 15px;
}
.left{
  display: flex;
  align-items: center;
}
.ka{
  width: 100%;
  border-radius: 10px;
  padding: 10px ;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.k1{
  margin-bottom: 10px; 
}
.k1 span{
    font-size: 16px;
    font-weight: 600;
    padding-right: 20px;
   margin-left: 9px;

  }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
  
.gongju{
   background: white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
}
.redbao{
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
}
.red .r1{
      font-size:16px;
      font-weight:600;
    }
   .red .r2{
      font-size:10px;
      /* font-weight:600; */
    }
.new{
        display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
}
 .zuo{
  width: 40%;
     background: white;
    border-radius: 10px;
    padding: 15px;
    line-height: 20px;
} 
.zuo h3{
      font-size: 16px;
    }
.zuo .div{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
     
    }
 .div span{
        padding: 2px 8px;
        border: 1px solid #ccc;
        border-radius: 20px; 
      }
   .zuo .ing{
      width: 100%;
      box-sizing: border-box;
      /* padding: 20px; */
      background: #eee;
      margin: 8px 0;
      border-radius: 10px;
    }
    .zuo img{
      width: 150px;
      height: 137px;
      border-radius: 0;
      padding: 0;
      margin: 0;
    }
    </style>
